<template>
  <div id="app">
	<h3>学生姓名是:{{studentName}}</h3>
	<!-- 通过父组件给了组件传递函数类型的props实现,子给父传递数据 -->
	<School :getSchoolName="getSchoolName"/>
	<!-- <Student v-on:sx="getStudentName" /> -->
	<!-- <Student @sx="getStudentName" /> -->
	<!-- <Student v-on:sx.once="getStudentName" /> -->
	<!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第一种写法:使用@或v-on,第二种写法,使用ref) -->
	<Student ref="student" @demo="m1" @click.native="show" />
  </div>
</template>

<script>
import School from './components/School.vue'
import Student from './components/Student.vue'

export default {
  name: 'App',
  data(){
	return {studentName:''}  
  },
  components: {
    School,Student
  },
  methods:{
	  getSchoolName(name) {
	  	console.log('App收到了学校名',name)
	  },
	  getStudentName(name){
	  	console.log('demo收到了学生名',name)
		this.studentName = name
	  },
	  m1(){
		  console.log('收到了demo触发的事件')
	  },
	  show(){
		  console.log('show 被调用了')
	  }
  },
  mounted(){
	  this.$refs.student.$on('sx',this.getStudentName)
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
